<!--
 * @Author: 孙文豪
 * @Description: 表格页面基础代码模板
 * @Date: 2024-03-05 16:15:23
 * @LastEditTime: 2024-03-07 16:13:34
 * @LastEditors: 孙文豪
-->
<template>
  <div class="custom-page" :class="{ fold: foldState }">
    <div class="custom-top"></div>
    <div class="custom-bottom">
      <div class="custom-table-top">
        <!-- 全部复选框 -->
        <div class="checked-box">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          ></el-checkbox>
        </div>
        <!-- 表头 -->
        <div
          class="title-item"
          v-for="item in tableConfig"
          :key="item.field"
          :style="{ flex: item.share, width: item.width }"
        >
          {{ item.name }}
        </div>
        <!-- 折叠按钮 -->
        <span class="iconfont icon-JXC-shang fold-table" @click="foldChange"></span>
      </div>
      <!-- 中间列表 -->
      <div class="custom-table-middle">
        <div class="table-item" v-for="custom in mockData" :key="custom.id">
          <!--每一项 复选框 -->
          <div class="checked-box">
            <el-checkbox
              v-model="custom.checked"
              @change="singleCheck"
            ></el-checkbox>
          </div>
          <!-- 数据内容 -->
          <div
            class="list-item"
            v-for="item in tableConfig"
            :key="item.field"
            :style="{ flex: item.share }"
          >
            <p
              class="item-field"
              v-MoveTips="custom[item.field]"
              v-if="item.field !== 'operate'"
            >
              {{ custom[item.field] }}
            </p>
            <!-- 操作 -->
            <div class="operate-list" :style="{ width: item.width }" v-else>
              <p
                class="operate-item"
                :style="{ flex: operate.share }"
                v-for="operate in operateList"
                :key="operate.code"
                @click="handleOperate"
              >
                {{ operate.name }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="custom-table-bottom">
        <div class="pagination">
          <swh-pagination
            :total="800"
            :eachDataSize="eachDataSize"
            :aroundRange="7"
            :fastSwitchNum="3"
            :pageNumList="[10, 20, 50, 100]"
            @getDataSize="getDataSize"
          ></swh-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { tableConfig, mockData, operateList } from './custom.js';
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
export default {
  name: '',
  setup() {
    const data = reactive({
      tableConfig,
      mockData,
      operateList,
      eachDataSize: 10,
      foldState: false,

      checkAll: false, //是否全选状态
      checkedIds: [], //勾选中的数据id
      isIndeterminate: false //半选状态
    });
    onBeforeMount(() => {});
    onMounted(() => {});
    const getDataSize = (val) => {
      data.eachDataSize = val;
    };
    // 折叠改变
    const foldChange = () => {
      data.foldState = !data.foldState;
    };
    // 点击操作功能
    const handleOperate = () => {
      console.log(data.checkedIds);
    };

    // 勾选逻辑，数组中增加checked字段控制选中
    // 全部，勾选或者取消
    const handleCheckAllChange = (val) => {
      data.isIndeterminate = false; //半选状态取消
      data.mockData.forEach((item) => {
        item.checked = val; //改变每一项状态true或者false
      });
      data.checkAll = val; //改变全部状态
      // 获取全部选中id
      data.checkedIds = data.mockData
        .filter((item) => item.checked)
        .map((d) => d.id);
    };
    // 点击勾选时，判断是否存在，存在就取消不存在就勾选
    const singleCheck = () => {
      // 点击复选框时会自动改变checked属性
      // 获取checked = true的数据id,组成新数组
      data.checkedIds = data.mockData
        .filter((item) => item.checked)
        .map((d) => d.id);
      // 改变全选和半选状态
      const activeNum = data.checkedIds.length;
      const allNum = data.mockData.length;
      data.checkAll = activeNum == allNum;
      data.isIndeterminate = Boolean(activeNum && activeNum < allNum);
    };
    return {
      handleCheckAllChange,
      singleCheck,
      handleOperate,
      foldChange,
      getDataSize,
      ...toRefs(data)
    };
  }
};
</script>
<style scoped lang="less">
.custom-page {
  position: relative;
  height: 100%;
  padding-top: 120px;
  box-sizing: border-box;
  transition: 0.3s;
  overflow: hidden;
  &.fold {
    padding-top: 0;
    .custom-top {
      height: 0px;
    }
    .custom-bottom {
      .custom-table-top {
        .checked-box {
          position: absolute;
          left: 7px;
        }

        .fold-table {
          transform: rotate(180deg);
        }
      }
    }
  }
  .custom-top {
    position: absolute;
    height: 120px;
    width: 100%;
    top: 0;
    box-shadow: @BSE;
  }
  .custom-bottom {
    position: relative;
    height: 100%;
    min-width: 1200px;
    padding-top: 40px;
    padding-bottom: 60px;
    box-sizing: border-box;
    .custom-table-top {
      position: absolute;
      display: flex;
      line-height: 40px;
      box-sizing: border-box;
      padding: 0 30px;
      height: 40px;
      width: 100%;
      top: 0;
      box-shadow: @BSE;
      .checked-box {
        position: absolute;
        left: 10px;
      }
      .fold-table {
        position: absolute;
        right: 10px;
        transition: 0.3s;
        cursor: pointer;
        font-weight: 700;
        color: @HSD;
        &:hover {
          color: @TSH;
        }
      }
      .title-item {
        text-align: center;
        font-size: 14px;
      }
    }
    .custom-table-middle {
      height: 100%;
      overflow: auto;
      .table-item {
        position: relative;
        display: flex;
        line-height: 40px;
        box-sizing: border-box;
        padding: 0 30px;
        cursor: pointer;
        .checked-box {
          position: absolute;
          left: 10px;
        }
        &:nth-child(odd) {
          background: @TSE;
        }
        &:hover {
          background: @TSD;
        }
        .list-item {
          text-align: center;
          font-size: 14px;
          color: @HSB;
          overflow: hidden;

          .item-field {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .operate-list {
            display: flex;
            .operate-item {
              text-align: center;
              font-size: 12px;
              color: @TSB;
              transition: 0.3s;
              &:hover {
                color: @TSH;
              }
            }
          }
        }
      }
    }
    .custom-table-bottom {
      position: absolute;
      height: 60px;
      width: 100%;
      bottom: 0;
      .pagination {
        float: right;
        margin-top: 15px;
        margin-right: 20px;
      }
    }
  }
}
</style>
